<template>
	<el-container>
		<!--		<el-header>-->
		<!--			<div class="left-panel">-->
		<!--				<el-radio-group v-model="dateType" size="mini" style="margin-right: 15px;">-->
		<!--					<el-radio-button label="今天"></el-radio-button>-->
		<!--					<el-radio-button label="昨天"></el-radio-button>-->
		<!--					<el-radio-button label="最近7天"></el-radio-button>-->
		<!--					<el-radio-button label="最近30天"></el-radio-button>-->
		<!--				</el-radio-group>-->
		<!--				<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"></el-date-picker>-->
		<!--			</div>-->
		<!--		</el-header>-->
		<el-main>
			<el-card shadow="never">
				<div class="number-data">
					<div class="item">
						<h2>总扫码次数
<!--							<el-tooltip effect="light">-->
<!--								<template #content>-->
<!--									<div style="width: 200px;line-height: 2;">-->
<!--										即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。-->
<!--									</div>-->
<!--								</template>-->
<!--								<i class="el-icon-question"></i>-->
<!--							</el-tooltip>-->
						</h2>
						<p>{{tongji.saoma_num}}</p>
					</div>
					<div class="item">
						<h2>总领取数量
<!--							<el-tooltip effect="light">-->
<!--								<template #content>-->
<!--									<div style="width: 200px;line-height: 2;">-->
<!--										一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。-->
<!--									</div>-->
<!--								</template>-->
<!--								<i class="el-icon-question"></i>-->
<!--							</el-tooltip>-->
						</h2>
						<p>{{tongji.get_num}}</p>
					</div>
					<div class="item">
						<h2>总点赞量
<!--							<el-tooltip effect="light">-->
<!--								<template #content>-->
<!--									<div style="width: 200px;line-height: 2;">-->
<!--										一天之内您网站的独立访问ip数。-->
<!--									</div>-->
<!--								</template>-->
<!--								<i class="el-icon-question"></i>-->
<!--							</el-tooltip>-->
						</h2>
						<p>{{tongji.digg_count}}</p>
					</div>
					<div class="item">
						<h2>总评论数量
<!--							<el-tooltip effect="light">-->
<!--								<template #content>-->
<!--									<div style="width: 200px;line-height: 2;">-->
<!--										只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。-->
<!--									</div>-->
<!--								</template>-->
<!--								<i class="el-icon-question"></i>-->
<!--							</el-tooltip>-->
						</h2>
						<p>{{tongji.comment_count}}</p>
					</div>
					<div class="item">
						<h2>总播放量
<!--							<el-tooltip effect="light">-->
<!--								<template #content>-->
<!--									<div style="width: 200px;line-height: 2;">-->
<!--										访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。-->
<!--									</div>-->
<!--								</template>-->
<!--								<i class="el-icon-question"></i>-->
<!--							</el-tooltip>-->
						</h2>
						<p>{{tongji.play_count}}</p>
					</div>
				</div>
				<!--				<div class="chart">-->
				<!--					<el-row>-->
				<!--						<el-col :span="8">-->
				<!--							<scEcharts height="250px" :option="pie"></scEcharts>-->
				<!--						</el-col>-->
				<!--						<el-col :span="16">-->
				<!--							<scEcharts height="250px" :option="option"></scEcharts>-->
				<!--						</el-col>-->
				<!--					</el-row>-->
				<!--				</div>-->
			</el-card>
			<el-card shadow="never">
				<scTable ref="table" :apiObj="apiObj" :params="params" stripe>
					<el-table-column label="用户信息" align="center">
						<el-table-column label="头像" prop="type" width="50">
							<template #default="scope">
							    <el-avatar  :src="scope.row.headimgurl" size="small"></el-avatar>
							</template>
						</el-table-column>
						<el-table-column label="名称" prop="nickname"></el-table-column>
					</el-table-column>
					<el-table-column label="点赞量" prop="digg_count"></el-table-column>
					<el-table-column label="播放量" prop="play_count"></el-table-column>
					<el-table-column label="评论量" prop="comment_count"></el-table-column>
					<el-table-column label="分享量" prop="share_count"></el-table-column>
					<!-- <el-table-column label="转发时间" prop="create_time" width="140"></el-table-column> -->
				</scTable>
				<el-button>下一页</el-button>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: 'chartlist',
	data(){
		return {
			tongji:{
				saoma_num:0,
				get_num:0,
				digg_count:0,
				comment_count:0,
				play_count:0
			},
			params:'',
			apiObj:''
		}
	},
	methods: {
		getData(data){

			this.$API.store.hddata.get({activity_id: data.id,user_id:data.user_id}).then(res=>{
				if(res.code==200){
					this.params = {activity_id:data.id}
					this.apiObj = this.$API.store.hddatauser
					this.tongji = res.data
				} else {
					this.$alert(res.msg, "提示", {type: 'error'})
				}
			})

		}
	}
}
</script>

<style scoped>
.el-card {margin-bottom: 15px;}

.number-data {display: flex;}
.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
.number-data .item:last-child {border: 0;}
.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;}
.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}

.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
</style>
